import 'package:pacsun/theme/app_colors.dart';
import 'package:pacsun/view/create/become/component/Content.dart';
import 'package:pacsun/view/create/become/component/ProfileAvatar.dart';
import 'package:pacsun/view/task/widgets/cache_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

List<Map<String, dynamic>> mockData = [
  {
    "title": 'Michelle Bonita',
    'tag': ['Musician', 'Actor'],
    'desc': 'Leading Voice',
    'content':
        'Joining the Pacsun Creator Community lets me express my personal style and share life inspira-tion with fans around the world. From music and acting to fashion, I’ve found my stage here.',
    'img': 'assets/imgs/tempImage.jpg',
    'proFile': 'assets/imgs/img_creator1.png',
  },
  {
    "title": 'Madio Monroe ',
    'tag': ['Artist'],
    'desc': 'Engagement Star',
    'content':
        'Becoming part of this creative community has been transformative. It’s not just a platform — it’s where my style come alive and connect. From streetwear experiments to curated runway looks, this is the place fuels my passion for turning fashion into conversation.',
    'img': 'assets/imgs/temp1.png',
    'proFile': 'assets/imgs/img_creator2.png',
  },
  {
    "title": 'Jon Thrifts',
    'tag': ['Fashion'],
    'desc': 'Content King',
    'content':
        'Here for the culture. Sneakers, graffiti, hustle. We make waves. Stay true.',
    'img': 'assets/imgs/temp2.png',
    'proFile': 'assets/imgs/img_creator3.png',
  },
];

class FeaturedCreators extends StatelessWidget {
  const FeaturedCreators({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375.w,
      height: 272.h,
      color: Colors.black,
      padding: EdgeInsets.only(top: 32).r,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Featured Creators',
            style: customTextStyle(fontSize: 24, fontWeight: 600),
          ),
          SizedBox(height: 35.h),
          SizedBox(
            height: 143.h,
            child: ListView.separated(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: mockData.length,
              separatorBuilder: (context, index) => SizedBox(width: 8.w),
              itemBuilder: (context, index) {
                final data = mockData[index];
                return GestureDetector(
                  onTap: () {
                    showModalBottomSheet(
                      context: context,
                      isScrollControlled: true,
                      backgroundColor: Colors.transparent,
                      builder: ((context) {
                        return ContentDetail(data: data);
                      }),
                    );
                  },
                  child: CreatorItem(data: data, index: index),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

class CreatorItem extends StatelessWidget {
  final Map<String, dynamic> data;
  final int index;

  const CreatorItem({super.key, required this.data, required this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 124.w,
      height: 143.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12).r,
        image: DecorationImage(
          image: AssetImage(data['img']),
          opacity: .5,
          fit: BoxFit.cover,
        ),
      ),
      margin: index == 0 ? EdgeInsets.only(left: 14).r : null,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(height: 13.h),
          ProfileAvatar(proFileUrl: data['proFile'] ?? ''),
          Text(
            data['title'],
            style: customTextStyle(
              fontWeight: 500,
              height: 18 / 12,
            ),
          ),
          Row(
            spacing: 5.w,
            mainAxisAlignment: MainAxisAlignment.center,
            children:
                (data['tag'] as List<String>).map((e) => buildTag(e)).toList(),
          ),
          SizedBox(height: 13.h),
        ],
      ),
    );
  }

  Widget buildTag(String tag) {
    return IntrinsicWidth(
      child: Container(
        height: 15.h,
        padding: EdgeInsets.symmetric(horizontal: 6).r,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Color(0XFFFFD400).withAlpha((255 * 0.3).floor()),
            borderRadius: BorderRadius.circular(12).r),
        child: Text(
          tag,
          style: customTextStyle(fontSize: 10, fontWeight: 500),
        ),
      ),
    );
  }
}
